<template>
  <div class="rate">
    <section class="replay-margin">
      <div class="replay-header" @click="backTo()">
        <div class="return-head-left">
          <img class="return-back" src="../../../static/images/qi.png" alt="">
        </div>
        <div class="return-right">
          <span class="return-back-text">消息列表</span>
        </div>
      </div>

      <div>
        <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh">
          <van-list
            v-model="isUpLoading"
            :finished="upFinished"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="onLoadList"
            :offset="10"
          >
            <div v-for="(item,index) in res_rate_list">
              <div class="replay-content">
                <div class="replay-content-list" @click="takeTa(item)">
                  <div class="replay-content-list-left">
                    <span class="name">
                      {{item.name}}
                    </span>
                  </div>
                  <!-- - 0：乘客请求车主承载，尚未建立搭乘关系；1：已解除搭乘关系； 2：乘客和车主已搭建搭乘关系；-->
                  <div class="replay-time-list-right">
                    <span class="replay-content-list-right-text" >{{item.modifyDate}}</span>
                  </div>
                  <div v-if="carOwner===1"  class="replay-content-list-right">
                    <span v-if="item.messStatus===0" class="replay-content-list-right-text">等待司机回应</span>
                    <span v-if="item.messStatus===1" class="replay-content-list-right-text">已取消搭载</span>
                    <span v-if="item.messStatus===2" class="replay-content-list-right-text">已搭载</span>
                  </div>
                  <div v-if="carOwner===0" class="replay-content-list-right">
                    <span v-if="item.messStatus===0" class="replay-content-list-right-text">请求搭载</span>
                    <span v-if="item.messStatus===1" class="replay-content-list-right-text">已取消搭载</span>
                    <span v-if="item.messStatus===2" class="replay-content-list-right-text">已搭载</span>
                  </div>
                  <i v-if="((carOwner ===1 && (item.hasRead === 0 || item.hasRead === 2)) || (carOwner ===0 && (item.hasRead === 0 || item.hasRead === 1)))" class="tip"></i>
                </div >
              </div>
            </div>
          </van-list>
        </van-pull-refresh>

      </div>

    </section>


  </div>

</template>

<script>
  import Vue from 'vue';
  import { List ,Cell,PullRefresh,Toast} from 'vant';
  import {toast} from "../../tools";
  Vue.use(List).use(Cell).use(PullRefresh).use(Toast);
  export default {
    name: "ownerList",
    data(){
      return{
        carOwner:0,
        phone:0,
        res_rate_list:[
      ],
        mod_key_word:'',
        res_record_list:[],
        pageSize:10,//每页条数
        pageIndex:1,//页码
        dtWinNumberInfos:[],//请求数据
        isDownLoading:false,//下拉刷新
        isUpLoading:false,//上拉加载
        upFinished:false,//上拉加载完毕
        offset:100,//滚动条与底部距离小于 offset 时触发load事件,
        res_order_type_list:[],
        mod_title:''
      }
    },
    components:{
      "van-list":List,
      "van-cell":Cell,
      "van-pull-refresh":PullRefresh
    },
    mounted(){
      // this.xhrRateList();
      // this.xhrSiteOrderType();

      this.phone = this.$route.query.phone;
      if(this.$route.query.id ===1 || this.$route.query.id === "1"){
        this.carOwner = 1;
        this.mod_title = "车主";
      }else {
        this.carOwner = 0;
        this.mod_title = "乘客";
      }
      this.getAllMessageList();
    },
    methods:{
      onLoadList(){
        this.pageIndex++;
        this.isUpLoading=true
        console.log("触发loading")
        this.getAllMessageList()
      },
      onDownRefresh(){
        this.pageIndex=1;
        this.upFinished = false;  // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
        this.getAllMessageList()
        // this.isDownLoading=true;
      },

      takeTa(item) {
        localStorage.removeItem("removeItem")
        localStorage.setItem("taPhone",item.phone)
        this.$router.push(
          {
            name:"index",
            query:{
              status:1,
              id:this.carOwner,
              phone:this.phone
            }
          }
        )
      },
      getAllMessageList() {
        let that = this;
        this.$httpPostService('/getAllMessageList',{
          phone:this.phone,
          carOwner:this.carOwner
        }).then(res => {
          console.log(res);
          if(res === null || res.length ===0){
            this.res_rate_list = [];
            this.upFinished = true;
            return;
          }
          if(res.length<this.pageSize){
            this.upFinished = true;
          }
          if(this.pageIndex ===1){
            this.res_rate_list = res
            // for(let i=0;i<this.res_rate_list.length;i++){
              // for(let j=0;j<this.res_order_type_list.length;j++){
              //   if(this.res_rate_list[i].trxcode===this.res_order_type_list[j].name){
              //     this.res_rate_list[i].title= this.res_order_type_list[j].title
              //   }
              // }
            // }
          }else{
            // this.res_rate_list = this.res_rate_list.concat(res)
            this.res_rate_list = res
          }
          // that.res_rate_list = res;
        }).catch(err => {
          console.log(err)
          Toast("获取消息列表失败")
        }).finally(()=>{
          this.isDownLoading = false;
          this.isUpLoading = false;
        })
      },
      xhrRateList(){
        this.$httpPostService('/admin/rate/lists',{
          uid:this.mod_key_word,
          page:this.pageIndex,perpage:this.pageSize

        }).then(res =>{
          console.log(res);
          if(res.list === null || res.list.length ===0){
            this.res_rate_list = [];
            this.upFinished = true;
            return;
          }
          if(res.list.length<this.pageSize){
            this.upFinished = true;
          }
          if(this.pageIndex ===1){
            this.res_rate_list = res.list
            for(var i=0;i<this.res_rate_list.length;i++){
              for(var j=0;j<this.res_order_type_list.length;j++){
                if(this.res_rate_list[i].trxcode===this.res_order_type_list[j].name){
                  this.res_rate_list[i].title= this.res_order_type_list[j].title
                }
              }
            }

          }else{
            this.res_rate_list = this.res_rate_list.concat(res)
          }

        }).catch(err => {
          console.log(err);
          Toast("获取资源列表异常")
        }).finally(()=>{
          this.isDownLoading = false;
          this.isUpLoading = false;
        })
      },
      backTo(){
        this.$router.push({
          name:"index",
          query:{
            status:1,
            id:this.carOwner,
            phone:this.phone
          }
        });
      }

    }
  }
</script>

<style scoped lang="less">
  .tip {
    display: block;
    background: #f00;
    border-radius: 50%;
    width: 0.22rem;
    height: 0.22rem;
    top: -0.2rem;
    margin-right: 0.33rem;
    position: relative;
  }
  .rate{
    width:100%;
    height:100%;
    .replay-header{
      height:0.96rem;
      background:#FF9800;
      display:flex;
      align-items: flex-end;
      justify-content: flex-start;
      .return-head-left{
        width:0.6rem;
        .return-back{
          width:0.23rem;
          height:0.4rem;
          margin-left:0.2rem;
          margin-bottom:0.11rem;
        }
      }

      .return-right{
        flex:1;
        display:flex;
        align-items: center;
        justify-content: space-between;
        //margin-left:0.8rem;
        .return-back-text{
          font-size:0.4rem;
          color:#fff;
          margin-bottom:0.11rem;
          width: 100%;
        }
        .return-back-right{
          width:0.43rem;
          height:0.44rem;
          margin-right:0.4rem;
        }
      }

    }
    .user-list-se{
      width:100%;
      height:1.35rem;
      display:flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      .user-list-se-left{
        width:8.8rem;
        height:0.77rem;
        border: 2px solid #FF9800;
        border-radius:0.22rem;
        display:flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        .user-list-se-input{
          width:8rem;
          height:0.77rem;
          border:none;
          outline:none;
          background-repeat:no-repeat;
          background-size:0.4rem 0.4rem;
          background-position:0.18rem;

        }
        .user-list-se-left-img{
          width:0.37rem;
          height:0.37rem;
          margin-left:0.18rem;

        }
        .user-list-se-left-btn{
          color:#fff;
          width:1rem;
          height:0.77rem;
          background:linear-gradient(90deg,rgba(255,152,0,1) 0%,rgba(15,255,255,1) 0%,rgba(255,152,0,1) 0%,rgba(255,90,0,1) 61%,rgba(255,90,0,1) 99%);
          border-radius:0.22rem;
          display:flex;
          align-items: center;
          justify-content: center;
          font-size:0.33rem;

        }

      }
      .user-list-se-right{
        .user-list-se-right-img{
          width:0.46rem;
          height:0.46rem;
          margin-left:0.2rem;
        }

      }
    }

    .replay-margin{
      .replay-content{
        width:100%;
        height:1.2rem;
        display:flex;
        background:#fff;
        flex-direction: row;
        .replay-content-list{
          width:100%;
          display:flex;
          align-items: center;
          border-bottom:2px solid #F6F5F5;;
          justify-content: space-between;
          .replay-content-list-left{
            display:flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-left:0.05rem;
            .name{
              font-size:0.3rem;
              color:#333333;
              margin-right:0.1rem;
              /*width:2rem;*/
              width: 1.8rem;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap
            }
          }
          .replay-content-list-right{
            display:flex;
            align-items: center;
            .replay-content-list-right-text{
              font-size:0.3rem;
              color:#333333;
              //margin-bottom:0.34rem;
              /*margin-right:0.1rem;*/
              width:2rem;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap
            }
          }
          .replay-time-list-right{
            /*display:flex;*/
            align-items: left;
            /*width: 70%;*/
            margin-left: 0.1rem;
            .replay-content-list-right-text{
              font-size:0.3rem;
              color:#333333;
              //margin-bottom:0.34rem;
              /*margin-right:0.1rem;*/
              width: 3.5rem;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap
            }
          }
        }

      }

    }
  }



</style>
